<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WoNiuShop</title>
<link rel="shortcut icon" href="icon.png" type="image/x-icon" />
<style>
html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	padding-top: 100px;
	font-family: '微软雅黑', '黑体', serif;
	height: 100%;
	box-sizing: border-box;
}

span {
	background-repeat: no-repeat;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	color: black;
}

a:hover {
	color: cornflowerblue;
	text-decoration: underline;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
/* 头部 */
#header {
	width: 100%;
	position: fixed;
	height: 60px;
	background-color: blue;
	top: 0px;
	background-color: #f8f8f8;
	box-shadow: 0 0 5px #333;
}

/* 表示id为header的HTML标签的所有直接子元素（div） */
#header>div {
	float: left;
	line-height: 60px;
}

#header #logo {
	margin-left: 30px;
	font-size: 24px;
	font-weight: bold;
}

#header #logo a {
	color: #666;
}

#header #userzoom {
	float: right;
	margin-right: 30px;
}

#header #userzoom a {
	font-size: 16px;
	margin-left: 15px;
	padding-left: 25px;
}

/* 版权信息 */
#footer {
	height: 50px;
	background-color: #F8F8F8;
	width: 100%;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	color: #999;
	box-shadow: 0 0 5px #333;
	bottom: 0px;
	position: fixed;
}

/* 登录 和注册 */
#login, #register {
	width: 400px;
	height: 450px;
	border: 1px solid #ccc;
	box-shadow: 0 0 10px #000;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 6px;
	position: fixed;
	top: 20px;
	left: 50%;
	margin-left: -200px;
	background-color: #fff;
	display: none;
}

.login-title, .register-title {
	text-align: center;
	height: 50px;
	line-height: 50px;
}

.login-form, .register-form {
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
/* 注册框 */
#register {
	height: 600px;
}

.form-group {
	padding: 12px 5px;
	margin: 10px 0px;
	font-size: 16px;
}

.check-login {
	margin-left: 130px;
	padding-bottom: 10px;
}

#verification_code {
	width: 110px;
	line-height: 50px;
	border-radius: 4px 4px 4px 4px;
	outline: none;
	font-size: 16px;
	text-align: center;
	transition: all 0.5s;
	border: 1px solid #ccc;
}

#page-black {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: none;
}

.outer-black {
	z-index: 99;
}

/* icon 设置  */
.icon {
	background-repeat: no-repeat;
	background-position: left center;
}

.i-user {
	background-image: url(icon/登录.png);
}

.i-userinfo {
	background-image: url(icon/用户.png);
}

.i-password {
	background-image: url(icon/密码.png);
}

.i-register {
	background-image: url(icon/注册.png);
}

/* 针对form */
.f-span {
	display: inline-block;
	width: 60px;
	height: 38px;
	background-color: #CCCCCC;
	background-position: center center;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px;
}

.g-span {
	display: inline-block;
	width: 60px;
	height: 38px;
	padding-top: 20px;
}

.f-input {
	padding: 10px 15px;
	font-size: 16px;
	border-radius: 0 4px 4px 0;
	border: 1px solid #ccc;
	outline: none;
	height: 40px;
	box-sizing: border-box;
	margin-top: -1px;
	margin-left: 60px;
	width: 300px;
	transition: all 0.5s;
}

.f-input:focus {
	border: 1px solid #1E90FF;
	box-shadow: 0 0 5px #1E90FF;
}
/*按钮*/
.btn {
	display: inline-block;
	padding: 15px 25px;
	text-align: center;
	color: white;
	/* line-height: 1.42857143; */ /* 行高为数字和字体尺寸相乘的数值 */
	margin: 0;
	border-radius: 4px;
	vertical-align: middle;
	cursor: pointer;
	white-space: nowrap; /* 文字不换行 */
	border: none;
	outline: none;
	text-shadow: 0px 1px 0px #2f6627;
}

.btn:active {
	top: 1px;
	position: relative;
}

.l-btn {
	margin-top: 20px;
	text-align: right;
}
/* 红色按钮 */
.btn-danger {
	background-color: darkred;
}

/* 关闭 */
.close {
	height: 50px;
	line-height: 50px;
	width: 25px;
	position: absolute;
	right: 0px;
	top: 0px;
	padding-right: 10px;
}

.close img {
	vertical-align: middle;
}

.close img:hover {
	cursor: pointer;
}

/*  轮播图    */
#show {
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

.slider {
	width: 1200px; /* 设置一个默认值，防止用户禁用js而现实异常，具体数值由js设定 */
	height: 375px;
	overflow: hidden;
}

.slider .item {
	float: left;
	width: 20%;
	height: 100%;
}

.item img {
	width: 100%;
}

.types {
	height: 220px;
	width: 1200px;
}

.type-item:hover {
	background-color: #ddd;
	cursor: pointer;
}

.type-item {
	width: 20%;
	height: 100%;
	border: 1px solid #ccc;
	float: left;
	box-sizing: border-box;
}

.type-img {
	height: 130px;
	text-align: center;
}

.type-content {
	height: 70px;
	padding: 0 10px;
	box-sizing: border-box;
}

.type-content h3 {
	margin: 0;
}
/*注册*/
.registe-input {
	font: 16px Times New Roman;
	height: 40px;
	line-height: 40px;
	width: 150px;
	margin: 10px 0;
	border-radius: 4px 4px 4px 4px;
	border: 1px solid #ccc;
}

.code {
	width: 100px;
	height: 30px;
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 4px 4px 4px 4px;
	margin-bottom: 10px;
}
/* 商品分类 */
#good-list{
	width: 1200px;
	height:580px;
	margin: 0 auto;
}
.good{
	width: 220px;
	height: 253px;
	box-sizing: border-box;
	margin-left: 20px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	float: left;
}
.good-img{
	height:180px;
	text-align: center;
	line-height:180px;
}
.good-img img{
	width: 70%;
	transition: transform 0.5s;
	border-radius: 50%;
	vertical-align: middle;
}
.good-img img:hover{
	transform: scale(1.1);
}


.s-money{
	color:darkred;
	font-weight: bold;
}

.good-info{
	height: 70px;
	background-color: #F8F8F8;
	border-top: 1px solid gray;
	/* position:relative; */
}

.good-right,.good-left{
	float: left;
	text-align: center;
}
.good-left{
	width:70px;
}
.good-right{
	width: 140px;
}
.good-price{
	font-size: 16px;
	height: 35px;
	line-height: 35px;
	
}
.good-add{
	height: 35px;
	
	text-align: center;
	/* position:absolute;
	bottom:20px; */
	left:30px;
}
.good-add img{
	vertical-align: middle;
	width: 20px;
	
}
.good-right{
	line-height:1.4;
	font-size: 14px;	
	height:70px;
	padding:10px 5px;
	box-sizing: border-box;
	overflow: hidden;
	}
 /* #pagebean{
	margin:0 auto;
}  */	
/* 
 分页
 */
.page{
	width: 500px;
	height: 30px;
	margin: 0 auto;
	
}
.page-item{
	height: 20px;
	line-height: 20px;
	border: 1px solid #ccc;
	margin-left: 5px;
	float: left;
	text-align: center;
	color: #999;
	padding:2px 5px;
}
.page-item:hover{
	background-color: #ddd;
	cursor: pointer;
}
</style>
</head>
<body>
	<!-- 导入jsp文件 -->
	<%@include file="loginandregister.jspf"%>
	
	<div id="good-list">
		<c:forEach items="${pageBean.goodsList}" var="good">
		<div class="good">
			<div class="good-img">
				<a href="GetGoodsInfoServlet?gid=${good.gId}"><img src="${good.goodImgPath}"></a>
			</div>
			<div class="good-info">
				<div class="good-left">
					<div class="good-price">
						<span class="s-money">${good.price}</span>
					</div>
					<div class="good-add">
						<img src="${good.addImgPath}">
					</div>
				</div>
				<div class="good-right">${good.introduce}</div>
			</div>
		</div>
		</c:forEach>
	</div>
	<!-- 放分页栏 -->
	<%-- <center> --%>
		<div class="page">
			<!-- 首页 上一页 12345 下一页 末页 -->
			<c:if test="${pageBean.currentPage!=1}">
				<div class="page-item first"><a href="GetCategoryGoodsServlet?cid=${pageBean.category.id}&currentPage=1">首页</a></div>
				<div class="page-item prev"><a href="GetCategoryGoodsServlet?cid=${pageBean.category.id}&currentPage=${pageBean.currentPage-1}">上一页</a></div>
			</c:if>
			<c:if test="${pageBean.totalPage > 5}">
				<%-- <c:if test="${${pageBean.currentPage-2 < 0}">
				<c:forEach begin="1" end="5" var="index">
				
				<c:if test="${index != pageBean.currentPage}">
					<a href="GetCategoryGoodsServlet?cid=${pageBean.category.id}&currentPage=${index}">${index}</a>
				</c:if>
				<c:if test="${index == pageBean.currentPage }">
					${index}
				</c:if>
				</c:forEach>
				</c:if> --%>
				<%-- <c:if test="${${pageBean.currentPage-2 > 0}"> --%>
				<c:forEach begin="${pageBean.currentPage}" end="${pageBean.currentPage+4}" var="index">
				<div class="page-item">
				<c:if test="${index != pageBean.currentPage}">
					<a href="GetCategoryGoodsServlet?cid=${pageBean.category.id}&currentPage=${index}">${index}</a>
				</c:if>
				<c:if test="${index == pageBean.currentPage }">
					${index}
				</c:if>
				</div>
				</c:forEach>
				</c:if>
			<%-- </c:if> --%>
			<c:if test="${pageBean.totalPage <= 5}">
			<c:forEach begin="1" end="${pageBean.totalPage}" var="index">
			<div class="page-item">
			<c:if test="${index != pageBean.currentPage}">
				<a href="GetCategoryGoodsServlet?cid=${pageBean.category.id}&currentPage=${index}">${index}</a>
			</c:if>
			<c:if test="${index == pageBean.currentPage }">
				${index}
			</c:if>
			</div>
			</c:forEach>
			</c:if>
			<c:if test="${pageBean.currentPage != pageBean.totalPage }">
				<div class="page-item next"><a href="GetCategoryGoodsServlet?cid=${pageBean.category.id}&currentPage=${pageBean.currentPage+1}">下一页</a></div>
				<div class="page-item last"><a href="GetCategoryGoodsServlet?cid=${pageBean.category.id}&currentPage=${pageBean.totalPage}">末页</a></div>
				
			</c:if>
		</div>
	<%-- </center> --%>
	<div id="footer">
			蜗牛创想科技-woniushop&copy; 版权所有
		</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/basic.js"></script>
	<script src="js/solider.js"></script>
	<script src="js/index.js"></script>
</body>
</html>